.card {
  @apply flex space-x-4  p-2 relative !m-0;
  @apply !border-0;

  &:hover {
    @apply before:bg-gray;
  }

  &::before {
    @apply absolute inset-0 bg-transparent opacity-50 rounded-xl transition-all -z-1;

    content: '';
  }

  &:hover {
    :global {
      .avatar {
        @apply transform duration-500 ease;

        transform: scale(1.02);
      }
    }
  }

  :global {
    .avatar {
      @apply transition-transform;
    }
  }
}

.border {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  pointer-events: none;

  :global {
    svg {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      vertical-align: unset;
      overflow: visible;
    }

    circle {
      shape-rendering: crispEdges;
      stroke: var(--yellow);
      stroke-width: 3px;
      fill: transparent;
      stroke-dashoffset: 0;
      transition-property: stroke-dashoffset;
      transition-duration: 0.5s;
    }
  }
}
